<template>
  <div class="home">
    <div class="homelogin">
      <div class="logintitle">学生成绩管理系统</div>
      <div class="loginform">
        <el-input
          v-model="serch.username"
          placeholder="请输入用户名"
          class="mb10"
        ></el-input>
        <el-input
          v-model="serch.password"
          type="password"
          placeholder="请输入密码"
          class="mb10"
        ></el-input>
        <el-radio-group v-model="serch.type" class="mb10">
          <el-radio :label="1">教师</el-radio>
          <el-radio :label="2">学生</el-radio>
        </el-radio-group>
        <el-button type="primary" class="ma" @click="login()">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../request";
export default {
  name: "HomeView",
  data() {
    return {
      serch: {
        username: "",
        password: "",
        type: "",
      },
    };
  },
  methods: {
    async login() {
      const res = await service.get("/score/login", {
        params: this.serch,
      });
      console.log(res);
      if (res.code == 200) {
        this.$message.success(res.msg);
        window.localStorage.setItem("data", JSON.stringify(res.data));
        window.localStorage.setItem("type", this.serch.type);
        if (this.serch.type == "1") {
          this.$router.push({
            path: "/about",
          });
        } else {
          this.$router.push({
            path: "/about1",
          });
        }
      } else {
        this.$message.warning(res.msg);
      }
    },
  },
};
</script>
<style scoped>
.ma {
  margin: 0 auto;
}
.mb10 {
  width: 100%;
  margin-bottom: 10px;
}
.loginform {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 10px;
  border-radius: 5px;
}
.logintitle {
  text-align: center;
  color: #fff;
  font-size: 30px;
}
.homelogin {
  width: 390px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -195px;
  margin-top: -205px;
}
.home {
  width: 100%;
  height: 100%;
  background: url("@/assets/login.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
</style>
